<template>
  <div class="amap-page-container">
    <slot name="inputSearch">
      <input :id="propsName.searchInput" type="text" v-show="showSearch"/>
    </slot>
    <slot name="searchOutput">
      <div :id="propsName.searchOutput" type="text" v-show="showSearch"/>
    </slot>
    <el-amap map-style="amap://styles/62009be025f187dd3eafe327d2e55b8e" :zoom="zoom"
             view-mode="2D" @click="clickMap" @init="initMap" class="amap-demo"
    >
      <el-amap-control-tool-bar :visible="true" position="LB"></el-amap-control-tool-bar>
      <el-amap-search-box :visible="false"
                          :inputId="propsName.searchInput"
                          :outputId="propsName.searchOutput"
                          @select="selectPoi"
                          @choose="choosePoi"
      />
      <el-amap-control-geolocation :visible="showGeolocation"
                                   @complete="getLocation"
                                   :markerOptions="{color: 'red'}"
                                   :zoomToAccuracy="true"
                                   ref="geolocation"
                                   :enableHighAccuracy="true"
      />
      <el-amap-marker v-if="currentMarker"
                      :key="currentMarker.id"
                      :position="currentMarker.position"
                      :title="currentMarker.name"
      />

      <el-amap-marker v-for="(marker, index) in markers"
                      :key="index"
                      :position="marker"
      />
    </el-amap>
  </div>
</template>

<script>


export default {
  name: 'GaoDeMap',
  data() {
    return {
      // 高德地图实例
      map: undefined,
      zoom: 16,
      currentMarker: undefined,
      // center: [121.59996, 31.197646],
      defaultPropsName: {
        searchInput: 'searchInput',
        searchOutput: 'searchOutput'
      }
    }
  },
  props: {
    props: {
      type: Object,
      required: false
    },
    markers: {
      type: Array,
      required: false,
      default() {
        return []
      }
    },
    center: {
      type: Array,
      required: false,
      default: undefined
    },
    showGeolocation: {
      type: Boolean,
      required: false,
      default: false
    },
    showSearch: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  computed: {
    propsName() {
      return { ...this.defaultPropsName, ...this.props }
    }
  },
  watch: {
    map: {
      handler() {
        console.log('map changed')
        // 初始化 定位到当前位置
        const geolocation = this.$refs.geolocation.$$getInstance()
        if (this.center && geolocation) {
          geolocation.getCurrentPosition()
        }
      },
      immediate: false
    },
    currentMarker() {
      console.log('position-update')
      this.$emit('position-update', this.currentMarker)
    }
  },
  methods: {
    clickMap(e) {
      console.log('click map :', e)
    },
    setMarker({ id, name, location }) {
      this.currentMarker = {
        position: [location.lng, location.lat],
        id,
        name
      }
    },
    selectPoi(poi) {
      console.log('selectPoi: ', poi)
      let location = poi.poi.location
      this.map.setZoomAndCenter(this.zoom, [location.lng, location.lat]) //设置地图中心点
      this.setMarker(poi.poi)
    },
    choosePoi(e) {
      console.log('choosePoi: ', e)
    },
    getLocation(poi) {
      console.log('getLocation: ', poi)
      let location = poi.position
      this.map.setZoomAndCenter(this.zoom, [location.lng, location.lat]) //设置地图中心点
      this.currentMarker = {
        position: [location.lng, location.lat]
      }
    },
    initMap(map) {
      console.log('init map: ', map)
      this.map = map
    }
  },
  created() {
    console.log('map init')
  }
}
</script>

<style scoped>
.amap-demo {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 300px;
}
</style>
